<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        table {
            width: 300px;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        th,
        td {
            text-align: center;
            padding: 10px 0;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h2>这是我的世界！</h2>
    <!-- 语法 -->
    <p>{{ title }}</p>

    <br><br><br>

    <ul>
        <li>
            <span>商品品牌：</span>
            <em>{{ goods.brands }}</em>
        </li>
        <li>
            <span>商品名称：</span>
            <em>{{ goods.goods_name }}</em>
        </li>
        <li>
            <span>商品价格：</span>
            <em>{{ goods.goods_price }}</em>
        </li>
        <li>
            <span>商品数量：</span>
            <em>{{ goods.goods_num }}</em>
        </li>

        <!-- 判断的语法 -->
        <li>
            <span>商品优惠：</span>
            <em>{{ goods.youhui ? goods.youhui : '暂无优惠' }}</em>
        </li>


        {{ if goods.gifts }}
        <li>
            <span>赠送礼品：</span>
            <em>{{ goods.gifts }}</em>
        </li>
        {{ /if }}
    </ul>

    <br><br><br>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名称</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody>
            <!-- $index  内部使用的 索引  $value 内部使用的 值 -->
            {{ each arr item i }}
            <tr>
                <td> {{ item.id }} - {{ i }} </td>
                <td> {{ item.uname }} </td>
                <td> {{ item.age }} </td>
                <td> {{ item.gender }} </td>
            </tr>
            {{ /each }}
        </tbody>
    </table>
</body>

</html>